<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.min.js"></script>
    <script type="text/javascript">
        window._AMapSecurityConfig = {
          securityJsCode: '68e73b38cde504eccfded6f272934e6d',
        }
      </script>
      <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=4835805de6ab6f2fe4a82e6c138e001c"></script>

      <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
      <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
      <script type="text/javascript"
          src="https://webapi.amap.com/maps?v=2.0&key=05d4b26d114b76606b2f7545ecdd9d5d&plugin=AMap.Driving"></script>
      <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
  </script>
</head>
<style>
    #container {
            margin: auto;
            width: 400px;
            height: 400px;
        }
        #panel {
            position: fixed;
            background-color: white;
            max-height: 90%;
            overflow-y: auto;
            top: 10px;
            right: 10px;
            width: 280px;
        }

        #panel .amap-call {
            background-color: #009cf9;
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
        }
</style>
<body>
<div style="width: 1000px;height: 100px;margin: auto;">
    <div style=" width: 1000px;height: 300px;background: Light grey;">

        <div style=" width: 300px;height: 200px; float: left;">
<div><img src="../2-18zy/img/tt444.png"white="50px" height="50px"></div>
<hr style="width: 300px;border: 1px solid red;">
<div><p>上次登入时间<span style="margin-left: 230px;">2018-9-8</span></p>
    <p>上次登入时间<span style="margin-left: 230px;">2018-9-8</span></p>
   </div>


<div>
    <h2>语言详细</h2> 
     <div id="main" style="width: 300px; height: 200px;"> </div></div>
   
    </div>



<div style=" width: 400px;height: 500px; float: left;margin-left: 200px;">
<img src="../2-18zy/img/75685.png" alt=""white="50px"height="50px">
    <h2>待办事项</h2>
    <hr>
    <div id="div3">
      
    </div>
</div>
</div>

    <div style=" width: 1000px;height: 700px; margin-top: -750px;background: Light grey;">
      <div style="width: 300px ;height: 100px;float: left;">
        <div id="container" style="width: 300px ;height: 150px;"></div>
</div>>
      <div style="width: 300px
      ;height: 100px;float: left;margin-left: 200px;">  <div id="tt" style="height:200px;width: 300px;margin-left: 10px;">
      
    </div>
</div>
    </div>
  </div>
</body>
<script>


var items=[]
    function shijian(){
        $.ajax({
            url: "http://47.94.4.201/index.php/index/admin/getTolist",
            data:'GET',
            success: function (res) {
                let liang=res.data
                var str=''
                liang.forEach((item,index) => {
                    str+=`
                        <div class="log">
                            <div style="display: flex;">
                                <input type="checkbox" onchange="shanChu(${index})">
                                <p style="margin-left:10px" class='shx'>${item}</p>
                            </div>
                           
                        </div>
                    `
                    
                });
		        $("#div3").html(str);
            }
        })
    }
     shijian()
     var a=0
    function shanChu(i){
      console.log(111);
        if(a==0){
            document.getElementsByClassName('shx')[i].style='text-decoration:line-through'
            a=1
        }else if(a==1){
            document.getElementsByClassName('shx')[i].style='text-decoration:none'
            a=0
        }
        
    }
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;



 option = {

  xAxis: {

   type: 'value'


},

yAxis: {

   type: 'category',

 data: ['Html', 'css', 'Scriptss', 'vue']

},


series: [{

   data: [{

value: 5.9,

itemStyle: {

 color: '#fb7477'

}

 },{

value: 13.7,

itemStyle: {

 color: '#3ff'

}

 },
{

value: 24.1,

itemStyle: {

 color: '#f1e550'

}

  },
{

value: 70.1,

itemStyle: {

 color: 'red'

}

  },



 ],

 type: 'bar'

}]

  };


option && myChart.setOption(option);
   var map = new AMap.Map("container", {
  viewMode: '3D',
  zoom: 15,
  center: [113.678314,34.860523],
  resizeEnable: true
 });

 var text = new AMap.Text({
  text:'公司',
  anchor:'center',
  draggable:true,
  cursor:'pointer',
  angle:10,
  style:{
   'padding': '.75rem 1.25rem',
   'margin-bottom': '1rem',
   'border-radius': '.25rem',
   'background-color': 'white',
   'width': '15rem',
   'border-width': 0,
   'box-shadow': '0 2px 6px 0 rgba(114, 124, 245, .5)',
   'text-align': 'center',
   'font-size': '20px',
   'color': 'blue'
  },
  position: [113.678314,34.860523]
 });

 text.setMap(map);

    var dom = document.getElementById('tt');
    var myChart = echarts.init(dom, null, {
      renderer: 'canvas',
      useDirtyRect: false
    });
    var app = {};

    var option;

    option = {
      title: {
        text:[ '家电','百度','食品']
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
          
        data: ['454', '332', '234', '379', '232','233','222']
      },
      grid: {
         
        left: '8%',
        right: '10%',
        bottom: '5%',
        containLabel: true
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
      },
      yAxis: {
        type: 'value',
        data:  ['454', '332', '234', '379', '232','233','222']
      },
      series: [{
          name: '家电',
          type: 'line',
          stack: 'Total',
          data: [12, 12, 10, 14, 90, 30, 10]
        },
        {
          name: '百货',
          type: 'line',
          stack: 'Total',
          data: [20, 12, 91, 34, 90, 30, 30]
        },
        {
          name: '食品',
          type: 'line',
          stack: 'Total',
          data: [10, 32, 01, 54, 90, 33, 40]
        },
     
      ]

    };

    if (option && typeof option === 'object') {
      myChart.setOption(option);
    }

    window.addEventListener('resize', myChart.resize);
</script>
</html>
